<template>
  <view
    class="form-page"
    :style="{
      paddingBottom: isChat ? '120rpx' : '20rpx',
    }"
  >
    <view
      v-if="managerApplyVo.audit == 2"
      style="font-size: 15px; color: #f44336; padding: 20rpx 10rpx 0"
      >{{ '拒绝原因：' + managerApplyVo.failReason }}
    </view>
    <view class="b-w form-item">
      <u--form labelPosition="left" :model="managerApplyVo" :rules="rules" ref="uForm">
        <u-form-item
          v-if="!examining || managerApplyVo.name"
          label="姓名"
          borderBottom
          prop="name"
          ref="item1"
        >
          <u--input
            disabledColor="#ffffff"
            :disabled="examining"
            placeholder="输入姓名"
            v-model="managerApplyVo.name"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="!examining || managerApplyVo.sex"
          label="性别"
          prop="sex"
          borderBottom
          @click="handleShowSex"
          ref="item1"
        >
          <u--input
            disabled
            :value="managerApplyVo.sex ? (managerApplyVo.sex == 2 ? '女' : '男') : ''"
            disabledColor="#ffffff"
            placeholder="请选择性别"
            border="none"
          ></u--input>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="!examining || managerApplyVo.birthday"
          label="出生年月"
          prop="birthday"
          labelWidth="80"
          borderBottom
          @click="handleBirthdayShow"
        >
          <u--input
            disabled
            :value="managerApplyVo.birthday | timeForm('YYYY-mm-dd')"
            disabledColor="#ffffff"
            placeholder="请选择年月日"
            border="none"
          ></u--input>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="!examining || managerApplyVo.mobile"
          label="手机号码"
          labelWidth="80"
          prop="mobile"
          borderBottom
          ref="item1"
        >
          <u--input
            disabledColor="#ffffff"
            :disabled="examining"
            v-model="managerApplyVo.mobile"
            maxlength="11"
            placeholder="请输入手机号码"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="!examining || managerApplyVo.company"
          label="单位全称"
          labelWidth="80"
          borderBottom
          prop="company"
          ref="item1"
        >
          <u--textarea
            :disabled="examining"
            v-model="managerApplyVo.company"
            maxlength="50"
            count
            autoHeight
            placeholder="请输入单位全称"
          ></u--textarea>
        </u-form-item>
        <u-form-item
          v-if="!examining || managerApplyVo.duties"
          label="职务"
          borderBottom
          prop="duties"
          ref="item1"
          @click="handleShowDuties"
        >
          <u--input
            disabledColor="#ffffff"
            placeholder="输入职务"
            disabled
            v-model="managerApplyVo.duties"
            border="none"
          ></u--input>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="!examining || managerApplyVo.title"
          label="职称"
          borderBottom
          @click="handleShowTitle"
          prop="title"
          ref="item1"
        >
          <view>
            <u--input
              :value="managerApplyVo.title | titleForm"
              disabledColor="#ffffff"
              disabled
              placeholder="请输入职称"
              border="none"
            ></u--input>
          </view>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="!examining || managerApplyVo.major"
          label="专业大类"
          labelWidth="80"
          prop="major"
          borderBottom
          @click="handleShowMajor"
        >
          <u--input
            disabledColor="#ffffff"
            disabled
            v-model="managerApplyVo.major"
            placeholder="请选择专业大类"
            border="none"
          ></u--input>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="!examining || managerApplyVo.isQualify"
          label="是否具有技术经纪人资格"
          labelWidth="108"
          borderBottom
          ref="item1"
        >
          <u-switch
            :disabled="examining"
            :value="managerApplyVo.isQualify"
            @change="changeIsQualify"
          ></u-switch>
        </u-form-item>
        <u-form-item
          v-if="!examining || managerApplyVo.selectType"
          label="推荐单位"
          labelWidth="80"
          prop="selectType"
          ref="item1"
          @click="showSupport = true"
        >
          <u--input
            disabled
            :value="managerApplyVo.selectType"
            disabledColor="#ffffff"
            placeholder="请选择推荐单位类型"
            border="none"
          ></u--input>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          v-if="!examining || managerApplyVo.recommendedCompany"
          labelWidth="80"
          borderBottom
          prop="recommendedCompany"
          ref="item1"
        >
          <view class="vertical-textarea">
            <u--textarea
              :disabled="examining"
              v-model="managerApplyVo.recommendedCompany"
              maxlength="150"
              count
              autoHeight
              style="min-height;: 100px"
              placeholder="请输入推荐单位"
            ></u--textarea
          ></view>
        </u-form-item>
      </u--form>
      <view class="confirm-btn">
        <template v-if="(myself && managerApplyVo.audit !== 0) || isAdd">
          <u-button type="primary" @click="handleSubmit" text="提交"></u-button>
        </template>
        <template v-if="!myself && managerApplyVo.audit === 0">
          <view style="margin-bottom: 20rpx">
            <u-button type="success" @click="handleExamining" text="审核通过"></u-button>
          </view>
          <u-button type="error" @click="handleRefuse" text="审核拒绝"></u-button>
        </template>
      </view>
    </view>
    <u-action-sheet
      :show="showSex"
      :actions="actions"
      title="请选择性别"
      @close="showSex = false"
      @select="sexSelect"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="showDuties"
      :actions="actionsDuties"
      title="请选择职务"
      @close="showDuties = false"
      @select="dutiesSelect"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="showMajor"
      :actions="actionsMajor"
      title="请选择专业大类"
      @close="showMajor = false"
      @select="majorSelect"
    >
    </u-action-sheet>
    <u-datetime-picker
      :show="birthDayShow"
      :maxDate="Number(new Date())"
      :minDate="Number(new Date('1900-01-01'))"
      @confirm="handleSelectBirthday"
      @cancel="handleCloseBirthday"
      v-model="managerApplyVo.birthday"
      mode="date"
    ></u-datetime-picker>
    <u-action-sheet
      :show="titlePickerShow"
      :actions="titleList"
      title="请选择职称"
      @close="titlePickerShow = false"
      @select="changeTitleHandler"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="degreePickerShow"
      :actions="degreeList"
      title="请选择学位"
      @close="degreePickerShow = false"
      @select="changeDegreeHandler"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="showSupport"
      :actions="actionSupport"
      title="请选择推荐单位类型"
      @close="showSupport = false"
      @select="supportSelect"
    >
    </u-action-sheet>
    <public-confirm
      ref="confirm"
      message="确认审核通过"
      :confShow="examiningConfirmShow"
      @confirm="handleExaminingPass"
      @cancel="handleExaminingCancel"
    ></public-confirm>
    <order-remark-pop ref="remarkPop" @remarkComfirn="remarkComfirn"></order-remark-pop>
    <view class="foot-bar flex-x-c" v-if="isChat">
      <view class="flex-y-c item-left" @click="goChat">
        <u-icon class="tags-icon" size="25" name="chat"></u-icon>
        <view class="f24">留言</view>
      </view>
    </view>
  </view>
</template>

<script>
import orderRemarkPop from './components/orderRemarkPop'
import jsFunPicker from '@/components/jsfun-picker/jsfun-picker.vue'
export default {
  components: { jsFunPicker, orderRemarkPop },
  data() {
    return {
      isAdd: false,
      examiningConfirmShow: false,
      examining: false,
      examiningId: '',
      titlePickerShow: false,
      degreePickerShow: false,
      showSupport: false,
      managerApplyVo: {
        name: '',
        sex: '',
        birthday: '',
        mobile: '',
        duties: '',
        isQualify: false,
        company: '',
        title: '',
        major: '',
        selectType: '建站企业',
        recommendedCompany: '',
      },
      rules: {
        name: {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change'],
        },
        sex: {
          type: 'number',
          required: true,
          message: '请选择性别',
          trigger: ['blur', 'change'],
        },
        birthday: {
          type: 'number',
          required: true,
          message: '请选择出生日期',
          trigger: ['blur', 'change'],
        },
        mobile: {
          validator: (rule, value, callback) => {
            if (!value) return callback('请输入联系人手机号')
            if (!this.$utils.isPhoneNumber(value)) return callback('请输入正确的手机号')
            return callback()
          },
          trigger: ['blur', 'change'],
        },
        major: {
          type: 'string',
          required: true,
          message: '请选择专业方向',
          trigger: ['blur', 'change'],
        },
        company: {
          type: 'string',
          required: true,
          message: '请输入单位名称',
          trigger: ['blur', 'change'],
        },
        duties: {
          type: 'string',
          required: true,
          message: '请选择职务',
          trigger: ['blur', 'change'],
        },
        title: {
          type: 'number',
          required: true,
          message: '请选择职称',
          trigger: ['blur', 'change'],
        },
        recommendedCompany: {
          type: 'string',
          required: true,
          message: '请填入推荐单位名称',
          trigger: ['blur', 'change'],
        },
      },
      industryListStr: '',
      showSex: false,
      showMajor: false,
      showDuties: false,
      birthDayShow: false,
      birthDay: '',
      actions: [
        {
          name: '男',
          id: 1,
        },
        {
          name: '女',
          id: 2,
        },
      ],
      actionsDuties: [
        {
          name: '处级',
          id: '处级',
        },
        {
          name: '科级',
          id: '科级',
        },
        {
          name: '股级',
          id: '股级',
        },
        {
          name: '技术骨干',
          id: '技术骨干',
        },
      ],
      actionsMajor: [
        {
          name: '管理',
          id: '管理',
        },
        {
          name: '工学',
          id: '工学',
        },
        {
          name: '理学',
          id: '理学',
        },
        {
          name: '医学',
          id: '医学',
        },
        {
          name: '农学',
          id: '农学',
        },
      ],
      selectIndustryList: '',
      industryList: [
        '农业',
        '林业',
        '牧业',
        '渔业',
        '采矿业',
        '制造业',
        '电力',
        '热力',
        '燃气',
        '交通运输',
        '仓储',
        '邮政业',
        '信息传输',
        '建筑业',
        '软件',
        '信息技术',
        '其他',
      ],
      titleList: [
        {
          name: '高级',
          id: 1,
        },
        {
          name: '中级',
          id: 2,
        },
        {
          name: '初级',
          id: 3,
        },
        {
          name: '无',
          id: 4,
        },
      ],
      degreeList: [
        {
          name: '博士',
          id: 1,
        },
        {
          name: '硕士',
          id: 2,
        },
      ],
      actionSupport: [
        {
          name: '建站企业',
          id: '建站企业',
        },
        {
          name: '县市区科协',
          id: '县市区科协',
        },
        {
          name: '省级学会（高校科研院所科协）',
          id: '省级学会（高校科研院所科协）',
        },
      ],
      roleId: 0,
      isChat: false,
      myself: false, //是否查看个人信息
    }
  },
  filters: {
    titleForm(value) {
      if (value == 1) {
        return '高级'
      } else if (value == 2) {
        return '中级'
      } else if (value == 3) {
        return '初级'
      } else if (value == 4) {
        return '无'
      } else {
        return ''
      }
    },
    degreeForm(value) {
      if (value == 1) {
        return '博士'
      } else if (value == 2) {
        return '硕士'
      }
    },
  },
  onLoad(options) {
    this.isAdd = options.isAdd && true
    this.roleId = options.id
    if (options.examineId) {
      this.myself = options.myself ? true : false
      uni.setNavigationBarTitle({ title: this.myself ? '我的信息' : '审核详情' })
      this.examiningId = options.examineId
      this.queryExaminingOrder(this.examiningId, 1)
    } else if (options.userId) {
      this.isChat = true
      uni.setNavigationBarTitle({ title: '科技经理人详情' })
      this.examining = true
      this.examiningId = options.userId
      this.queryExaminingOrder(this.examiningId, 2)
    }
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    handleShowTitle() {
      if (this.examining) return
      this.titlePickerShow = true
    },
    queryExaminingOrder(examiningId, type) {
      let url = type === 2 ? '/user/userInfo' : '/roleApply/roleApplyInfo'
      const param = type === 2 ? { userId: examiningId } : { id: examiningId }
      this.$request(url, param).then((res) => {
        const managerApply = res.result.managerApply || res.result.managerApplyVo
        this.examining = this.myself ? (managerApply.audit === 0 ? true : false) : true
        managerApply.birthday = new Date(managerApply.birthday).getTime()
        managerApply.isQualify = managerApply.isQualify == 1
        this.managerApplyVo = Object.assign(this.managerApplyVo, managerApply)
        let arraySup = this.managerApplyVo.recommendedCompany.split(':')
        this.managerApplyVo.selectType = arraySup.length === 2 ? arraySup[0] : '建站企业'
        this.managerApplyVo.recommendedCompany = arraySup.length === 2 ? arraySup[1] : arraySup[0]
      })
    },
    industryListChange(e) {
      this.managerApplyVo.provideDirection = e.list
      this.industryListStr = e.textStr || ''
    },
    changeTitleHandler(param) {
      this.titlePickerShow = false
      this.managerApplyVo.title = param.id
    },
    handleShowDegree() {
      if (this.examining) return
      this.degreePickerShow = true
    },
    supportSelect(param) {
      this.showSupport = false
      this.managerApplyVo.selectType = param.id
    },
    changeIsQualify(e) {
      this.managerApplyVo.isQualify = e
    },
    handleTitleClose() {
      this.titlePickerShow = false
    },
    sexSelect(e) {
      this.managerApplyVo.sex = e.id
    },
    dutiesSelect(e) {
      this.managerApplyVo.duties = e.id
    },
    majorSelect(e) {
      this.managerApplyVo.major = e.id
    },
    handleSelectBirthday(e) {
      this.birthDayShow = false
      this.managerApplyVo.birthday = e.value
    },
    handleCloseBirthday() {
      this.birthDayShow = false
    },
    handleShowSex() {
      if (this.examining) return
      this.showSex = true
    },
    handleShowMajor() {
      if (this.examining) return
      this.showMajor = true
    },
    handleShowDuties() {
      if (this.examining) return
      this.showDuties = true
    },
    handleBirthdayShow() {
      if (this.examining) return
      this.birthDayShow = true
    },
    handleExamining() {
      this.examiningConfirmShow = true
    },
    handleExaminingPass() {
      this.$request('/roleApply/auditRoleApply', {
        audit: 1,
        id: this.examiningId,
      }).then((res) => {
        this.examiningConfirmShow = false
        this.$utils.toast('审核已通过')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      })
    },
    remarkComfirn(param) {
      this.$request('/roleApply/auditRoleApply', {
        audit: 2,
        failReason: param.custRemark,
        id: this.examiningId,
      }).then((res) => {
        this.$utils.toast('审核已拒绝')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      })
    },
    handleRefuse() {
      this.$refs.remarkPop.showPop()
    },
    handleExaminingCancel() {
      this.examiningConfirmShow = false
    },
    handleSubmit() {
      this.$refs.uForm.validate().then((res) => {
        const managerApplyVo = this.$utils.deepCopy(this.managerApplyVo)
        managerApplyVo.isQualify = managerApplyVo.isQualify ? 1 : 2
        managerApplyVo.recommendedCompany =
          managerApplyVo.selectType + ':' + managerApplyVo.recommendedCompany
        delete managerApplyVo.selectType
        this.$request('/roleApply/roleApply', {
          roleId: this.roleId || 5,
          managerApplyVo: managerApplyVo,
        }).then((res) => {
          this.$utils.toast('认证已提交审核')
          setTimeout(() => {
            uni.navigateBack({})
          }, 1000)
        })
      })
    },
    goChat() {
      this.$routeUtils.navigateTo({
        url: `/pages/new/sendMsg?id=${this.examiningId}&name=${this.managerApplyVo.name}`,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.form-page {
  padding: 0 20rpx;
  padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
}
.form-item {
  margin-top: 20rpx;
  border-radius: 10rpx;
  padding: 0 20rpx;
  padding-bottom: 20rpx;
}

.add {
  font-size: 13px;
  color: #00b4fd;
}
.vertical-textarea {
  .u-textarea {
    min-height: 150rpx;
  }
}
.foot-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: #fff;
  padding-top: 10rpx;
  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
  justify-content: space-between;
  .btn {
    display: inline-flex;
    margin-right: 20rpx;
  }
  .item-left {
    padding: 0 30rpx;
  }
}
</style>
